<template>
  <article class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-white/50 overflow-hidden">
    <!-- 帖子头部 -->
    <header class="relative p-8 lg:p-10 border-b border-gray-100/50">
      <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500" />
      
      <div class="flex flex-col lg:flex-row justify-between items-start gap-6">
        <div class="space-y-6 flex-1">
          <div class="flex flex-wrap items-center gap-3">
            <span v-if="post.isPinned" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-orange-500 to-amber-500 text-white rounded-full text-sm font-semibold shadow-lg">
              <svg class="w-4 h-4 mr-2" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
              </svg>
              置顶
            </span>
            <span v-if="post.isLocked" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-red-500 to-pink-500 text-white rounded-full text-sm font-semibold shadow-lg">
              <svg class="w-4 h-4 mr-2" viewBox="0 0 24 24" fill="currentColor">
                <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
              </svg>
              锁定
            </span>
          </div>
          
          <h1 class="text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
            {{ post.title }}
          </h1>
          
          <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
            <div class="flex items-center gap-4">
              <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold text-lg">
                {{ (post.author?.name || '匿名用户').charAt(0) }}
              </div>
              <div>
                <div class="font-semibold text-gray-900 text-lg">
                  {{ post.author?.name || '匿名用户' }}
                </div>
                <div class="text-gray-500 text-sm">
                  {{ formatTime(post.createdAt) }}
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="flex flex-col sm:flex-row gap-4">
          <button 
            class="group flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-pink-50 to-rose-50 border-2 border-pink-200 rounded-xl hover:from-pink-100 hover:to-rose-100 hover:border-pink-300 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm hover:shadow-lg"
            :class="{ '!bg-gradient-to-r !from-pink-500 !to-rose-500 !border-pink-500 !text-white hover:!from-pink-600 hover:!to-rose-600': isLiked }"
            @click="$emit('toggleLike')"
            :disabled="post.isLocked"
          >
            <svg class="w-5 h-5 transition-transform duration-300 group-hover:scale-110" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
            </svg>
            <span class="font-semibold">{{ post.likeCount }}</span>
          </button>
          
          <button 
            v-if="!post.isLocked"
            class="group flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-xl hover:from-blue-100 hover:to-indigo-100 hover:border-blue-300 transition-all duration-300 shadow-sm hover:shadow-lg"
            @click="$emit('share')"
          >
            <svg class="w-5 h-5 transition-transform duration-300 group-hover:scale-110" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"/>
            </svg>
            <span class="font-semibold text-gray-700">分享</span>
          </button>

          <div v-if="canEdit" class="flex gap-3">
            <button 
              class="group flex items-center gap-2 px-5 py-3 bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-xl hover:from-green-100 hover:to-emerald-100 hover:border-green-300 transition-all duration-300 shadow-sm hover:shadow-lg"
              @click="$emit('edit')"
            >
              <svg class="w-5 h-5 transition-transform duration-300 group-hover:scale-110 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
              </svg>
              <span class="font-semibold text-green-700">编辑</span>
            </button>
            
            <button 
              class="group flex items-center gap-2 px-5 py-3 bg-gradient-to-r from-red-50 to-rose-50 border-2 border-red-200 rounded-xl hover:from-red-100 hover:to-rose-100 hover:border-red-300 transition-all duration-300 shadow-sm hover:shadow-lg"
              @click="$emit('delete')"
            >
              <svg class="w-5 h-5 transition-transform duration-300 group-hover:scale-110 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
              </svg>
              <span class="font-semibold text-red-700">删除</span>
            </button>
          </div>
        </div>
      </div>
    </header>

    <!-- 帖子统计 -->
    <div class="flex flex-wrap gap-6 px-8 lg:px-10 py-6 bg-gradient-to-r from-gray-50/80 to-blue-50/80 border-b border-gray-100/50">
      <div class="flex items-center gap-3 text-gray-600 bg-white/60 px-4 py-2 rounded-lg shadow-sm">
        <svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
        </svg>
        <span class="font-medium">{{ post.viewCount }} 次浏览</span>
      </div>
      <div class="flex items-center gap-3 text-gray-600 bg-white/60 px-4 py-2 rounded-lg shadow-sm">
        <svg class="w-5 h-5 text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
        </svg>
        <span class="font-medium">{{ post.replyCount }} 条回复</span>
      </div>
    </div>

    <!-- 帖子正文 -->
    <div class="p-8 lg:p-10">
      <div class="prose prose-lg max-w-none text-gray-900 leading-relaxed prose-headings:text-gray-900 prose-a:text-indigo-600 prose-strong:text-gray-900 prose-code:text-indigo-600 prose-pre:bg-gray-50 prose-pre:border prose-pre:border-gray-200" v-html="post.content" />
    </div>
  </article>
</template>

<script setup lang="ts">
import type { Post } from '~/types/post'

interface Props {
  post: Post
  isLiked: boolean
  canEdit: boolean
}

interface Emits {
  (e: 'toggleLike'): void
  (e: 'share'): void
  (e: 'edit'): void
  (e: 'delete'): void
}

defineProps<Props>()
defineEmits<Emits>()

const formatTime = (dateString: string) => {
  const date = new Date(dateString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else if (days < 7) {
    return `${days}天前`
  } else {
    return date.toLocaleDateString()
  }
}
</script>
